<template>
	<div class="page">
		<div class="page-header">
			<img class="page-header__banner" src="~@/assets/images/speciality-header.png" alt="banner">
			<div class="page-header__bd">
				<h1 class="page-name">{{ $route.meta.title }}</h1>
			</div>
		</div>
		<div class="page-bd">
			<div class="diffSection">
				<div class="diffSection-left">
					<el-dropdown class="modify-dropdown">
						<el-row type="flex" align="middle">
							<span class="diffSection-title" style="margin-right: 10px;">{{ diffLeft.code }}  {{ diffLeft.name }}</span>
							<i style="color: #ccc;" class="el-icon-caret-bottom"></i>
						</el-row>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="item in collectList" :key="item.id">
								<el-row type="flex" align="middle" style="min-width: 89px;">
									<span @click="onClickCollectItem(item, 'diffLeft')" style="flex: 1; margin-right: 10px;">{{ item.name }}</span>
									<i @click.stop="onCancelCollectItem(item)" style="flex-shrink: 0; line-height: 1;" class="el-icon-delete"></i>
								</el-row>
							</el-dropdown-item>
							<el-dropdown-item v-if="collectList.length === 0">暂无数据</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="diffSection-middle">
					<img class="icon-diff" src="~@/assets/images/speciality-diff.png" alt="">
				</div>
				<div class="diffSection-right">
					<el-dropdown class="modify-dropdown">
						<el-row type="flex" align="middle">
							<span class="diffSection-title" style="margin-right: 10px;" v-if="diffRight.code">
								{{ diffRight.code }} {{ diffRight.name }}
							</span>
							<span v-else class="diffSection-title" style="margin-right: 10px;">请选择</span>
							<i style="color: #ccc;" class="el-icon-caret-bottom"></i>
						</el-row>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="item in collectList" :key="item.id">
								<el-row type="flex" align="middle" style="min-width: 89px;">
									<span @click="onClickCollectItem(item, 'diffRight')" style="flex: 1; margin-right: 10px;">{{ item.name }}</span>
									<i @click.stop="onCancelCollectItem(item)" style="flex-shrink: 0; line-height: 1;" class="el-icon-delete"></i>
								</el-row>
							</el-dropdown-item>
							<el-dropdown-item v-if="collectList.length === 0">暂无数据</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left">{{ diffLeft.grandCategoryName || '' }}</div>
				<div class="diffSection-middle">所属门类</div>
				<div class="diffSection-right">{{ diffRight.grandCategoryName || '' }}</div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left">{{ diffLeft.parentCategoryName || '' }}</div>
				<div class="diffSection-middle">所属专业类</div>
				<div class="diffSection-right">{{ diffRight.parentCategoryName || '' }}</div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left">{{ diffLeft.degree || '' }}</div>
				<div class="diffSection-middle">学位授予门类 </div>
				<div class="diffSection-right">{{ diffRight.degree || '' }}</div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left">{{ diffLeft.educationalSystem || '' }}</div>
				<div class="diffSection-middle">修业年限 </div>
				<div class="diffSection-right">{{ diffRight.educationalSystem || '' }}</div>
			</div>
			<div class="diffSection text-left">
				<div class="diffSection-left" style="white-space: pre-wrap;">{{ diffLeft.describe || '' }}</div>
				<div class="diffSection-middle">专业概述  </div>
				<div class="diffSection-right" style="white-space: pre-wrap;">{{ diffRight.describe || '' }}</div>
			</div>
			<div class="diffSection text-left">
				<div class="diffSection-left" style="white-space: pre-wrap;">{{ diffLeft.courseInfo || '' }}</div>
				<div class="diffSection-middle">专业课程</div>
				<div class="diffSection-right" style="white-space: pre-wrap;">{{ diffRight.courseInfo || '' }}</div>
			</div>
			<div class="diffSection">
				<div class="diffSection-left">
					<el-row v-if="diffLeft.majorScore">
						<el-col v-for="item in diffLeft.majorScore" :key="item.id" :span="6">{{ item.name }}: {{ item.score }}</el-col>
					</el-row>
				</div>
				<div class="diffSection-middle">
					<div>
						<div>科目相关度</div>
						<div>(满分为5分)</div>
					</div>
				</div>
				<div class="diffSection-right">
					<el-row v-if="diffRight.majorScore">
						<el-col v-for="item in diffRight.majorScore" :key="item.id" :span="6">{{ item.name }}: {{ item.score }}</el-col>
					</el-row>
				</div>
			</div>
			<div class="diffSection text-left">
				<div class="diffSection-left" style="white-space: pre-wrap;">{{ diffLeft.studyType || '' }}</div>
				<div class="diffSection-middle">考研方向</div>
				<div class="diffSection-right" style="white-space: pre-wrap;">{{ diffRight.studyType || '' }}</div>
			</div>
			<div class="diffSection text-left">
				<div class="diffSection-left" style="white-space: pre-wrap;">{{ diffLeft.workType || '' }}</div>
				<div class="diffSection-middle">就业方向</div>
				<div class="diffSection-right" style="white-space: pre-wrap;">{{ diffRight.workType || '' }}</div>
			</div>
			<div class="diffSection text-left">
				<div class="diffSection-left">
					<section style="text-align: left;" v-if="diffLeft._relevantSchool && diffLeft._relevantSchool.schoolList.length > 0">
						<span>年份：{{  diffLeft._relevantSchool.year }}年</span>
						<span style="margin: 0 40px;">院校：{{  diffLeft._relevantSchool.count }}所</span>
						<span>录取人数：{{  diffLeft._relevantSchool.enterCount }}人</span>
						<div>
							<v-clamp autoresize :max-lines="3">
								{{ diffLeft._relevantSchool.schoolList.map(item => item.schoolName).join('、') }}
								<span slot="after" slot-scope="scope" style="margin-left: 5px;">
									<el-button size="mini" type="primary" plain @click="scope.toggle()">{{ scope.clamped ? '展开' : '收起' }}</el-button>
								</span>
							</v-clamp>
						</div>
					</section>
				</div>
				<div class="diffSection-middle">招生院校</div>
				<div class="diffSection-right">
					<section style="text-align: left;" v-if="diffRight._relevantSchool && diffRight._relevantSchool.schoolList.length > 0">
						<span>年份：{{  diffRight._relevantSchool.year }}年</span>
						<span style="margin: 0 40px;">院校：{{  diffRight._relevantSchool.count }}所</span>
						<span>录取人数：{{  diffRight._relevantSchool.enterCount }}人</span>
						<div>
							<v-clamp autoresize :max-lines="3">
								{{ diffRight._relevantSchool.schoolList.map(item => item.schoolName).join('、') }}
								<span slot="after" slot-scope="scope" style="margin-left: 5px;">
									<el-button size="mini" type="primary" plain @click="scope.toggle()">{{ scope.clamped ? '展开' : '收起' }}</el-button>
								</span>
							</v-clamp>
						</div>
					</section>
				</div>
			</div>
		</div>
		<div class="fixed-handle">
			<div @click="$router.go(-1)" class="fixed-handle__back">返回</div>
		</div>
	</div>
</template>

<script>
import { request } from "@/util/request.js"
import VClamp from 'vue-clamp'

export default {
	components: {
    VClamp
  },
	data() {
		return {
			diffLeft: {},
			diffRight: {},
			collectList: []
		}
	},
	created() {
		let diffLeftName = this.$route.query.name
		this.getMajorsDetailByName(diffLeftName, 'diffLeft')
		this.getCollectList().then(res => {
			// 选中收藏列表第一个 如果右 === 左 则取下一个
			if (this.collectList.length > 0) {
				let diffRightName = this.collectList[0].name
				if (this.collectList.length > 1) {
					diffRightName = diffLeftName !== this.collectList[0].name
														? this.collectList[0].name
														: this.collectList[1].name
				}
				this.getMajorsDetailByName(diffRightName, 'diffRight')
			}
		})
	},

	methods: {
		getMajorsDetailByName(name, diffType) {
			request({
				method: 'get',
				url: 'majorDetailInfo/getMajorDetails',
				params: {
					name,
				}
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
				this[diffType] = res.data
				this.getMajorRelevantSchool(diffType)
			})
		},

		getMajorRelevantSchool(diffType) {
			this.$api.getMajorRelevantSchool({
				name: this[diffType].name,
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
				res.data.schoolList = res.data.schoolList || []
				this.$set(this[diffType], '_relevantSchool', res.data)
			})
		},

		getCollectList() {
			return this.$api.getCollectList({
				pageNum: 1,
				pageSize: 500,
				type: 2, // 收藏类型 1:学校 2:专业
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					this.$message.error(res.msg)
					return Promise.reject(res)
				}
				console.log(res.data);
				this.collectList = res.data.list
				return res
			})
		},

		onClickCollectItem(item, diffType) {
			this.getMajorsDetailByName(item.name, diffType)
		},

		onCancelCollectItem(item) {
			this.$confirm(`确定删除该收藏？`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				return this.$store.dispatch('setCollectStatus', {
					action: 'cancel',
					params: [
						{ code: item.code, type: item.type, }
					]
				})
			}).then(res => {
				this.getCollectList()
			})
		},
	}
}

</script>
<style lang="stylus" scoped>
.fixed-handle
	position fixed
	right: 20px;
	top: 200px;
	&__back
		display flex
		align-items center
		justify-content center
		cursor pointer
		color: white;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		font-size: 15px;
		text-align: center;
		background-color: orange;
.page
	font-size: 15px;
	background: #F9F9F9;
	&-bd
		width BodyMaxWidth
		margin 10px auto 60px auto
		uiBlock();
		padding 32px 22px 39px 22px
		box-sizing border-box

.page-header
	width: 100%;
	height: 260px;
	position relative
	&__banner
		width 100%
		height 100%
		object-fit: cover;
		position absolute
		top 0
		left 0
	&__bd
		text-align center
		padding 100px 0 0 0
		position relative
		z-index 1
		width BodyMaxWidth
		margin 0 auto
		box-sizing border-box
.page-name
	margin 0
	font-size: 50px;
	font-weight: normal;
	color: #fff;
	line-height: 48px;
	text-shadow: 0px 4px 4px rgba(121, 68, 2, 0.1);

.icon-diff
	width 100%
	position absolute
	top 0
	left 0
	z-index 1
	pointer-events: none;
.diffSection
	display flex
	box-sizing border-box
	font-size: 16px;
	line-height 30px
	font-weight: 400;
	color: #333;
	text-align center
	border-radius: 6px
	&-title
		font-size: 20px;
		font-weight: PingFangMedium500;
		cursor pointer
	// &:first-child
	// 	^[0]-left, ^[0]-right
	// 		display flex
	// 		align-items center
	// 		justify-content center
	&:nth-child(odd)
		background BackgroundStripe
	&-left
		flex 1
		padding 15px 42px 15px 42px
	&-middle
		width 147px
		flex-shrink 0
		background: #FFF2E7;
		padding 15px 0
		position relative
		display: flex;
		align-items: center;
		justify-content: center;
	&-right
		flex 1
		padding 15px 42px 15px 42px
	.modify-dropdown
		vertical-align middle
.text-left
	text-align left
</style>
